<template>
  <div>
    <Window
      :show="windowConfig.show"
      :buttons="windowConfig.bottons"
      :showeCancel="false"
      @close="windowConfig.show = false"
    >
      <div class="title">{{ blog.title }}</div>
      <div v-html="blog.content" class="blog-detail"></div>
    </Window>
  </div>
</template>

<script setup>
import { getCurrentInstance, nextTick, reactive, ref } from "vue";
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-light.css";
const { proxy } = getCurrentInstance();

const api = {
  getBlogDetail: "/blog/getBlogById",
};
const windowConfig = reactive({
  show: false,
  bottons: [
    {
      type: "danger",
      text: "关闭",
      click: (e) => {
        windowConfig.show = false;
      },
    },
  ],
});

const blog = ref({});
const showDetail = async (blogId) => {
  windowConfig.show = true;
  let result = await proxy.Request({
    url: api.getBlogDetail,
    params: {
      blogId: blogId,
    },
  });
  if (!result) {
    return;
  }
  blog.value = result.data;
  nextTick(() => {
    let blocks = document.querySelectorAll("per coe");
    blocks.forEach((block) => {
      hljs.highlightBlock(block);
    });
  });
};

defineExpose({ showDetail });
</script>

<style lang="scss" scoped>
/* 组件样式 */
.title {
  font-size: 20px;
}
.blog-detail {
  font-size: 16px;
  blockquote {
    padding: 0 1em;
    color: #6a737d;
    border-left: 0.25em solid #dfe2e5;
  }
  img {
    max-width: 50%;
  }
}
</style>
